<template>
  <div class="courseView">
    <div @click="courseClick(el)" class="itemView" v-for="(el,idx) in courseList">
      <plan-item-m :course=el></plan-item-m>
    </div>
  </div>
</template>

<script>

  import PlanItemM from './PlanItemM'
  import {generateRouterPath} from '../../../router/util'

  export default {
    name: 'PlanCourseM',
    props: {
      courseList: {
        default() {
          return []
        }
      }
    },
    components: {
      PlanItemM
    },
    methods: {
      courseClick(item) {
        let path = generateRouterPath(`/course/courseDetail/${item.id}`)
        this.$router.push({path: path, query: {enterStatus: 1}})
      }

    }
  }
</script>

<style scoped>
  .courseView {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }
  .itemView {
    width: calc((100% - 15px) / 2.0);
    margin-right: 15px;
    margin-bottom: 20px;
  }
  .courseView :nth-child(2n) {
    margin-right: 0px;
  }

</style>
